<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>在线考试后台管理系统</title>
	<link rel="stylesheet" type="text/css" href="bootstrap-4.6.0-dist\css\bootstrap.css">
	<link rel="stylesheet" type="text/css" href="bootstrap-4.6.0-dist\css\bootstrap-icons.css">
	<style>
		.top{
			background: #5f6ccc;
		    height: 55px;
		    line-height: 55px;
		    color: #fff;
		    overflow: hidden;
		}
		.d1{
			float: left;
		    margin-left: 20px;
		    font-size: 18px;
		}
		.d2{
			float: right;
    		margin-right: 20px;
		}
		body{
			margin: 0;
		}
		.leftbar{
		    position: absolute;
		    top: 55px;
		    bottom: 0px;
		    left: 0px;
		    width: 200px;
		    border-right: 1px solid #ddd;
		}
		.maincontent{
		    position: absolute;
		    top: 55px;
		    left: 201px;
		    right: 0px;
		    bottom: 0;
		}
		.info{
			text-align: center;
    		margin: 25px 0;
		}
		.info img{
			width: 80px;
			border-radius: 50%;
		}
		/* 去除默认样式 */
		a{
			text-decoration: none;
			color: #000;
		}
		/* 块元素，上下排列 */
		.leftbar a{
			display: block;
		}
		/* 伪类，设置某一种状态下的样式
		hover:悬浮 */
		.leftbar a:hover{
			color:#007bff;
			background: #f3f3f3;
		}
		/* 从整体，设置间隙 */
		.items{
			line-height: 45px;
    		margin-left: 25px;
		}
		.fu{
			border-bottom: 1px dashed #ddd;
		}
		.zi{
			font-size: 14px;
		}
		.zi a{
			padding-left: 10px;
		}
		.maincontent{
			margin: 25px;
		}
	</style>
</head>
<body>
	<!-- 头 -->
	<div class="top">
		<div class="d1">在线考试系统</div>
		<div class="d2">
			<span>欢迎,HelloWorld</span>
			<a href="#">登出</a>
		</div>
	</div>

	<!-- 左侧导航 -->
	<!-- 定位：用户来指定为位置；（自由） -->
	<div class="leftbar">
		<div class="info">
			<img src="ying.jpg" alt="">
			<div>Hello World</div>
		</div>

		<div class="items">
			<div>
				<div class="fu">
					
					基础信息管理
					
				</div>
				<div class="zi">
					<a href="list.html" target="frm">学院信息</a>
					<a href="">专业信息</a>
					<a href="">班级信息</a>
					<a href="">学生信息</a>
				</div>
			</div>
			<div>
				<div class="fu">
					
					考试管理
					
				</div>
				<div class="zi">
					<a href="">试卷管理</a>
					<a href="">试卷提交</a>
				</div>
			</div>
			<div>
				<a href="" class="fu">
					
					统计与分析</a>
			</div>
			<div>
				<a href="" class="fu">
					
					个人中心</a>
			</div>
			
		</div>
	</div>


	<!-- 右侧内容 -->
	<div class="maincontent">
		<iframe src="list.html" name="frm" width="100%" height="100%" frameborder="0"></iframe>


	</div>
	<script src="/online/assets/js/jquery.min.1.10.2.js"></script>

	<script>
		/*class属性为fu的div元素*/
		//当被点击时，要执行的函数
		$('div.fu').click(function() {
			//当前被点击元素的，下一个元素，隐藏/显示
			/*if($(this).next().is(':hidden')){
				$(this).next().show(500);
			}else{
				$(this).next().hide(500);
			}*/
			//toggle，自动切换
			$(this).next().toggle(500);
		});

		//给a绑定单击事件
		$('.items a').click(function() {
			//其他a的样式去掉
			$('.items a').css('color', '').css('background', '');;
			//当前的加上样式
			$(this).css('color',"#007bff").css('background', '#eee');
		});
	</script>
</body>
</html>